<template>
  <div class="dy-main AccountManage">
    <div class="dy-header">
      <x-header title="账户管理" :left-options="{preventGoBack:true}" @on-click-back="back">
        <x-icon class="icon-add" slot="right" type="ios-plus-empty" size="48" @click.native="goAdd"></x-icon>
      </x-header>
    </div>
    <div class="dy-body">
      <div v-for="(card, cardIndex) in accountData.cardList" :key="cardIndex" class="zx-cardL">
        <div class="cardL-container">
          <div class="cardL-bg" :class="card.cardName==='信用卡'?'credit-card':''">
            <div class="caption">
              <h4>{{card.cardName}}</h4>
              <div class="cardL-label" :class="card.cardMain==='true'?'':'no-data'">{{card.cardMain==='true'?'默认卡':''}}</div>
            </div>
            <span class="cardType">{{card.cardType}}</span>
            <p class="balance">{{card.capitalAmt}}<span>元</span></p>
            <div class="card-detail">
              <div class="type">
                <!--<span v-html="currency+ (currency!=''&&accountType!=''?' | ':'')+ accountType"></span>-->
                <p>{{card.currency?'美元':'人民币'}}</p>
                <p class="border" :class="card.accountType?'':'no-data'"></p>
                <p>{{card.accountType}}</p>
              </div>
              <div class="card-No">{{card.cardNo}}</div>
            </div>
          </div>
          <div class="cardL-buttons">
            <p>{{card.cardName==='信用卡'?'快速还款':'活期转定期'}}</p>
            <p class="border"></p>
            <p @click="goNext('detail',card)"><span></span>详情</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      capitalFlag: 1, // 资产查询标志 0-不含资产，1-包含资产
      accountData: {
        cardList: []
      }
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    getData () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'addCardList', 'basic_Data': JSON.stringify({ 'clientNo': this.$store.getters.getClientNo, 'capitalFlag': this.capitalFlag })}
        }),
        (response) => {
          let respData = JSON.parse(response).data
          console.log(respData)
          if (respData.head.respCode === '000000') { // 返回000000为正常，否则输出错误
            this.accountData.cardList = respData.body
          } else { // 调用原生提示，输出错误内容
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': respData.head.respMsg
            })
          }
        })
    },
    goAdd () {
      this.$router.push({name: 'AccountAddCardVerifi', query: {'status': 0}})
    },
    goNext (way, card) {
      if (way === 'detail') {
        if (card.cardType === '信用卡') {
          this.$router.push({name: 'AccountCardDetail2', query: {'cardNo': card.cardNo, 'accountType': card.accountType, 'cardMain': card.cardMain}})
        } else {
          this.$router.push({name: 'AccountCardDetail', query: {'cardNo': card.cardNo, 'accountType': card.accountType, 'cardMain': card.cardMain}})
        }
      }
    }
  },
  mounted () {
    this.$publicFun.getUserInfo(this).then(res => {
      this.getData()
    })
  }
}
</script>

<style lang="less">
  .AccountManage {
    .dy-header{
      .icon-add {
        position: absolute;
        top: -.2rem;
        right: -.15rem;
        width: .72rem;
        height: .72rem
      }
    }
    .dy-body{
      .zx-cardL {
        width: 100%;
        padding: .16rem .32rem;
        background-color: #f0f0f0;
        .cardL-container{
          width: 6.78rem;
          margin: 0 auto;
          background-color: #fff;
          border-radius: .26rem;
          overflow: hidden;
          .cardL-bg {
            width: 100%;
            padding: .26rem .32rem;
            background-image: url("../../../static/img/cardBgl.png");
            -webkit-background-size: 100% auto;
            background-size: 100% 100%;
            color: #fff;
            &.credit-card {
              background-image: url("../../../static/img/cardBglr.png");
            }
            .caption {
              display: flex;
              justify-content:space-between;
              align-items: center;
              font-size: 0.32rem;
              h4 {
                height: .28rem;
                line-height: .28rem;
              }
              .cardL-label {
                height: .38rem;
                font-size: .2rem;
                line-height: .38rem;
                padding: .01rem .06rem;
                border: .02rem solid #fff;
                border-radius: .08rem;
                &.no-data {
                  border: none;
                }
              }
            }
            .cardType {
              margin-top: .1rem;
              height: .28rem;
              line-height: .28rem;
              font-size: .2rem;
            }
            .balance {
              margin:.04rem 0 .24rem;
              height: .8rem;
              line-height: .8rem;
              font-size: .68rem;
              span {
                font-size: .24rem;
              }
            }
            .card-detail {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .type {
                display: flex;
                height: .28rem;
                line-height: .28rem;
                align-items: center;
                font-size: .24rem;
                vertical-align: middle;
                .border {
                  position: relative;
                  top: -.01rem;
                  height: .26rem;
                  margin: 0 .16rem;
                  border-right: .02rem solid #fff;
                  &.no-data {
                    border: none;
                  }
                }
              }
              .card-No {
                font-size: .32rem;
              }
            }
          }
          .cardL-buttons {
            width: 100%;
            height: .76rem;
            display: flex;
            align-items: center;
            p {
              width: 49.9%;
              height: 100%;
              text-align: center;
              line-height: .76rem;;
              font-size: .32rem;
            }
            .border {
              width: .2%;
              height: .26rem;
              border-left: .02rem solid #CDCED3;
            }
          }
        }
      }
    }
  }
</style>
